<template>
  <div class="box">
    <h1 class="fs-30">A组件,{{num}}</h1>
    <van-button type="primary" @click="handlePlus">数字+</van-button>
    <van-button type="primary" @click="handleAdd">新增商品</van-button>
    <ul>
      <li v-for="(item,index) in goods" :key="index">
        名称:{{item.name}}
        价格:{{item.price}} 元
        数量:{{item.n}} 个
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    computed: { //必须再computed提取状态机数据
      num() {
        return this.$store.state.count.num
      },
      goods(){
        return this.$store.state.goods.goodsList
      }
    },
    methods: {
      handlePlus() {
        this.$store.commit('count/plus')
      },
      handleAdd(){
        this.$store.commit('goods/goodsAddMut',{
          name:'新商品',
          price:(Math.random()*450+50).toFixed(2),
          n:1
        })
      }
    },
  }
</script>

<style lang="less" scoped>
.box{
  height: 300px;
  border: 1px solid #333;
}
</style>